@use "sass:map";

/**
 * Colors Base
 *
 * These are the pure base color presets. Most of the time, you should not be
 * using these colors directly in the theme but rather use "Colors Theme"
 * instead because those are "Theme (light or dark)" dependant.
 * -------------------------------------------------------------------------- */
// 基础色，来自 vue 官网
:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f9f9f9;
    --vt-c-white-mute: #f1f1f1;
    --vt-c-black: #1a1a1a;
    --vt-c-black-pure: #000000;
    --vt-c-black-soft: #242424;
    --vt-c-black-mute: #2f2f2f;
    --vt-c-indigo: #213547;
    --vt-c-indigo-soft: #476582;
    --vt-c-indigo-light: #aac8e4;
    --vt-c-gray: #8e8e8e;
    --vt-c-gray-light-1: #aeaeae;
    --vt-c-gray-light-2: #c7c7c7;
    --vt-c-gray-light-3: #d1d1d1;
    --vt-c-gray-light-4: #e5e5e5;
    --vt-c-gray-light-5: #f2f2f2;
    --vt-c-gray-dark-1: #636363;
    --vt-c-gray-dark-2: #484848;
    --vt-c-gray-dark-3: #3a3a3a;
    --vt-c-gray-dark-4: #282828;
    --vt-c-gray-dark-5: #202020;
    --vt-c-divider-light-1: rgb(60 60 60 / 29%);
    --vt-c-divider-light-2: rgb(60 60 60 / 12%);
    --vt-c-divider-dark-1: rgb(84 84 84 / 65%);
    --vt-c-divider-dark-2: rgb(84 84 84 / 48%);
    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgb(60 60 60 / 70%);
    --vt-c-text-light-3: rgb(60 60 60 / 33%);
    --vt-c-text-light-4: rgb(60 60 60 / 18%);
    --vt-c-text-light-code: var(--vt-c-indigo-soft);
    --vt-c-text-dark-1: rgb(255 255 255 / 87%);
    --vt-c-text-dark-2: rgb(235 235 235 / 60%);
    --vt-c-text-dark-3: rgb(235 235 235 / 38%);
    --vt-c-text-dark-4: rgb(235 235 235 / 18%);
    --vt-c-text-dark-code: var(--vt-c-indigo-light);
    --vt-c-green: #42b883;
    --vt-c-green-light: #42d392;
    --vt-c-green-lighter: #35eb9a;
    --vt-c-green-dark: #33a06f;
    --vt-c-green-darker: #155f3e;
    --vt-c-blue: #3b8eed;
    --vt-c-blue-light: #549ced;
    --vt-c-blue-lighter: #50a2ff;
    --vt-c-blue-dark: #3468a3;
    --vt-c-blue-darker: #255489;
    --vt-c-yellow: #ffc517;
    --vt-c-yellow-light: #ffe417;
    --vt-c-yellow-lighter: #ffff17;
    --vt-c-yellow-dark: #e0ad15;
    --vt-c-yellow-darker: #bc9112;
    --vt-c-red: #ed3c50;
    --vt-c-red-light: #f43771;
    --vt-c-red-lighter: #fd1d7c;
    --vt-c-red-dark: #cd2d3f;
    --vt-c-red-darker: #ab2131;
    --vt-c-purple: #de41e0;
    --vt-c-purple-light: #e936eb;
    --vt-c-purple-lighter: #f616f8;
    --vt-c-purple-dark: #823c83;
    --vt-c-purple-darker: #602960;
}

$themes: (
    light: (
        // 背景色
        bg: var(--vt-c-white),
        bg-soft: var(--vt-c-white-soft),
        bg-mute: var(--vt-c-white-mute),
        // 分隔线
        divider: var(--vt-c-divider-light-1),
        divider-light: var(--vt-c-divider-light-2),
        divider-inverse: var(--vt-c-divider-dark-1),
        divider-inverse-light: var(--vt-c-divider-dark-2),
        // 文本色
        text-1: var(--vt-c-text-light-1),
        text-2: var(--vt-c-text-light-2),
        text-3: var(--vt-c-text-light-3),
        text-4: var(--vt-c-text-light-4),
        text-code: var(--vt-c-text-light-code),
        text-inverse-1: var(--vt-c-text-dark-1),
        text-inverse-2: var(--vt-c-text-dark-2),
        text-inverse-3: var(--vt-c-text-dark-3),
        text-inverse-4: var(--vt-c-text-dark-4),
        // 商标色
        brand: var(--vt-c-green),
        brand-light: var(--vt-c-green-light),
        brand-dark: var(--vt-c-green-dark),
        brand-highlight: var(--vt-c-brand-dark)
    ),
    dark: (
        bg: var(--vt-c-black),
        bg-soft: var(--vt-c-black-soft),
        bg-mute: var(--vt-c-black-mute),
        divider: var(--vt-c-divider-dark-1),
        divider-light: var(--vt-c-divider-dark-2),
        divider-inverse: var(--vt-c-divider-light-1),
        divider-inverse-light: var(--vt-c-divider-light-2),
        text-1: var(--vt-c-text-dark-1),
        text-2: var(--vt-c-text-dark-2),
        text-3: var(--vt-c-text-dark-3),
        text-4: var(--vt-c-text-dark-4),
        text-code: var(--vt-c-text-dark-code),
        text-inverse-1: var(--vt-c-text-light-1),
        text-inverse-2: var(--vt-c-text-light-2),
        text-inverse-3: var(--vt-c-text-light-3),
        text-inverse-4: var(--vt-c-text-light-4),
        brand-highlight: var(--vt-c-brand-light)
    )
);

/* 1.闭包，保存当前循环的主题 light\dark */
$cur-theme: light;

@mixin use-theme() {
    @each $key, $value in $themes {
        /* !golbal 声明使用全局变量 $cur-theme，而不是在此新建一个局部变量 $cur-theme */

        /* 2. 保存当前循环到的主题到全局 */
        $cur-theme: $key !global;
        html[data-theme="#{$key}"] & {
            @content;
        }
    }
}

/* 3. 输入主题属性，返回属性值 */
@function get-theme-val($key) {
    /* 从主题大对象中获取当前主题的对象 */
    $cur-theme-map: map.get($themes, $cur-theme);

    @return map.get($cur-theme-map, $key);
}

// 使用示例
// .item {
//     width: 100%;
//     height: 100vh;

//     @include useTheme {
//         color: get-theme-val(text-1);
//         background-color: get-theme-val(bg);
//     }
// }
